import { useNavigate } from 'react-router'
import dayjs from 'dayjs'
import { Button, Space, Tag, theme } from 'antd'
import { FileTextOutlined } from '@ant-design/icons'

import { Black } from '@/components/Black'
import { useBoundStore } from '../../store'
import { getWaybillStatusName } from '../../utils'
import styles from './styles.module.less'

/** 追踪模板详情 */
export const BaseInfo = () => {
  const navigate = useNavigate()
  const { token } = theme.useToken()
  const detail = useBoundStore(state => state.detail)
  const openEventPopup = useBoundStore(state => state.openEventPopup)

  return (
    <div className={styles.box}>
      <div className={styles.titleBox}>
        <Black onClick={() => navigate(`/biz/trackManage/list`)} />
        <div className={styles.titleBox}>
          <div className={styles.titleBox_left}>
            <div className={styles.title}>
              <span>{detail?.waybillNo || '--'}</span>
              <Tag color={getWaybillStatusName.colorOf(detail?.waybillStatus)}>
                {getWaybillStatusName(detail?.waybillStatus)}
              </Tag>
            </div>
            <Space style={{ flex: 'none', color: token.colorTextTertiary }}>
              <span>创建时间 {detail?.createAt ? dayjs(detail?.createAt).format('YYYY-MM-DD HH:mm:ss') : '--'}</span>
              <span>更新时间 {detail?.updateAt ? dayjs(detail?.updateAt).format('YYYY-MM-DD HH:mm:ss') : '--'}</span>
            </Space>
          </div>
          <div className={styles.titleBox_right}>
            <Space>
              <Button
                disabled={[18, 19].includes(detail?.waybillStatus as number)}
                type="default"
                icon={<FileTextOutlined />}
                onClick={() => openEventPopup({})}
              >
                添加轨迹
              </Button>
              {/* <Button icon={<EllipsisOutlined />} type="default"></Button> */}
            </Space>
          </div>
        </div>
      </div>
    </div>
  )
}
